<template>
    <div class="recommend-container">
        <div class="recommend">
            <div class="zt">
                专题推荐
            </div>
            <div class="fours">
                <router-link :to="{path:'/roles',query:{type:'czjs'}}">
                <div class="one">
                    <div class="item_text">
                        <div class="ss">神兽</div>
                        <div class="ss_ss">我喂神兽袋盐</div>
                    </div>
                    <div class="item_pic aa"></div>
                </div>
                </router-link>
                <router-link :to="{path:'/roles',query:{type:'czjs'}}">
                <div class="one">
                    <div class="item_text child">
                        <div class="ss">超值角色</div>
                        <div class="ss_ss">均价千元，宠装齐全</div>
                    </div>
                    <div class="item_pic bb"></div>
                </div>
                </router-link>
                <router-link :to="{path:'/roles',query:{type:'czjs'}}">
                <div class="one">
                    <div class="item_text">
                        <div class="ss">狮驼岭</div>
                        <div class="ss_ss">大王派我来巡山</div>
                    </div>
                    <div class="item_pic cc"></div>
                </div>
                </router-link>
                <router-link :to="{path:'/roles',query:{type:'czjs'}}">
                <div class="one child">
                    <div class="item_text">
                        <div class="ss">法爆专题</div>
                        <div class="ss_ss">称霸龙宫魔王寨</div>
                    </div>
                    <div class="item_pic dd"></div>
                </div>
                </router-link>
            </div>
        </div>
</div>
</template>
<script>

export default {
  name:'HomeRecommend',
}
</script>
<style lang="scss" scoped>
.recommend-container{
    margin-top: rem(22);
    padding:0 rem(22);
    .recommend {
        position: relative;
        width: 100%;
        height: rem(550);
        margin-top: rem(10);
        padding: rem(10) 0 0 rem(10);
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .zt {
            width: 100%;
            height: rem(60);
            line-height: rem(60);
            font-size: rem(45);
            font-weight: 700;
            text-align: center;
        }
        .fours {
            width: 100%;
            height: rem(480);
            margin: rem(10) 0;
            .one {
                position: relative;
                float: left;
                width: 48%;
                height: rem(200);
                margin: rem(10) .8% ;
                border-radius: rem(20);
                background-image: linear-gradient(-90deg, rgb(253, 247, 240) 0%, rgb(245, 252, 251) 100%);
                .item_text {
                    position: absolute;
                    left: 10px;
                    top: 0;
                    width: 50%;
                    height: rem(200);
                    
                    padding-top: 12px;
                    color: rgb(112, 151, 146);
                    .ss {
                        width: 100%;
                        font-size:rem(40);
                        height:26px;
                    }
                    .ss_ss {
                        width: 100%;
                        font-size: rem(30);
                        height: 36px;
                        margin-top: 5px;
                    }
                }
                .item_pic {
                    position: absolute;
                    right: 0;
                    width: rem(200);
                    height: rem(200);               
                }
                .aa{
                    background: url(../../../../assets/imgs/r1.png) no-repeat 50% 50%;
                     background-size: auto 100%;
                }
                .bb{
                    background: url(../../../../assets/imgs/r2.png) no-repeat 50% 50%;
                     background-size: auto 100%;
                }
                .cc{
                    background: url(../../../../assets/imgs/r3.png) no-repeat 50% 50%;
                     background-size: auto 100%;
                }
                .dd{
                    background: url(../../../../assets/imgs/r4.png) no-repeat 50% 50%;
                     background-size: auto 100%;
                }
            }
            
        }
    }

}


</style>